<template>
  <div class="userPage">
    <van-nav-bar
      title="我的"
      left-text="返回"
      left-arrow
      @click-right="exit()"
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="setting-o" size="20" />
      </template>
    </van-nav-bar>
    <div class="userInfo">
      <van-image
        class="userPic"
        round
        width="6rem"
        height="6rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <h3 class="username">{{ username }}</h3>
    </div>
    <van-grid>
      <van-grid-item icon="paid" text="待付款" to="" />
      <van-grid-item icon="orders-o" text="待接单" to="" />
      <van-grid-item icon="tosend" text="待发货" to="" />
      <van-grid-item icon="logistics" text="待收货" to="" />
    </van-grid>
    <van-cell-group class="aboutList">
      <van-cell icon="description" title="全部订单" is-link to="order" />
      <van-cell icon="location-o" title="我的地址" is-link to="address" />
      <van-cell icon="points" title="我的积分" is-link to="" />
      <van-cell icon="gold-coin-o" title="我的优惠卷" is-link to="" />
      <van-cell icon="point-gift-o" title="我收到的礼物" is-link to="" />
    </van-cell-group>
  </div>
</template>
<script>
export default {
  name: "Mine",
  data() {
    return {
      username: "",
    };
  },
  methods: {
    exit() {
      this.$dialog
        .confirm({
          title: "确认退出",
          message: "您确定要退出登录吗？",
        })
        .then(() => {
          // on confirm
          this.$store.commit("logout");
          this.$router.replace("login");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  created() {
    const userInfo = localStorage.getItem("userInfo");
    const { username } = JSON.parse(userInfo);
    this.username = username;
  },
};
</script>
<style scoped>
.userPage {
  text-align: left;
}
.userInfo {
  text-align: center;
}
.userPic {
  margin-top: 3rem;
}
</style>